<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        width: 300px;
        height: 300px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      let box = document.querySelector("#box");

      box.onclick = function () {
        // throA(event);
        deboA(event);
      };

      function a(event) {
        console.log("执行核心代码");
        console.log(event);
      }

      let throA = throttle(a, 2000);

      //   节流函数
      function throttle(callback, time) {
        // 上次触发时间  （第一次默认为0）
        let lastTime = 0;
        // console.log(lastTime);
        return function (event) {
          let nowTime = Date.now();
          if (nowTime - lastTime > time) {
            console.log(lastTime);
            callback.call(event.target, event);
            lastTime = nowTime;
          }
        };
      }

      //   防抖函数
      function debounce(callback, time) {
        return function (event) {
          //   console.log(event.target);
          // 判断当前是否有定时器id
          if (callback.timerId) {
            console.log("清除定时器");
            clearTimeout(callback.timerId);
          }

          callback.timerId = setTimeout(() => {
            console.log("event", event);
            callback.call(event.target, event);

            delete callback.timerId;
          }, time);
        };
      }

      let deboA = debounce(a, 2000);

      //   function throttle(callback, delay) {
      //     // 用于保存处理事件的时间, 初始值为0, 保证第一次会执行
      //     let start = 0;
      //     // 返回事件监听函数 ==> 每次事件发生都会执行
      //     return function (event) {
      //       console.log(start);
      //       console.log("---throttle");
      //       // 发生事件的当前时间
      //       const current = Date.now();
      //       // 与上一次处理事件的时差大于delay的时间
      //       if (current - start > delay) {
      //         // 执行处理事件的函数
      //         callback.call(event.target, event);
      //         // 保证当前时间
      //         start = current;
      //       }
      //     };
      //   }
    </script>
  </body>
</html>
